<template>
    <span>
        <el-popover placement="left-end" title="选择视频" trigger="click" @show="show">
            <el-row class="res-selector">
                <el-col :span="12">
                    <el-tree
                            :data="mediaClasses"
                            :props="{ value: 'id', label: 'name', children: 'subClasses' }"
                            @node-click="selectClass"
                    ></el-tree>
                </el-col>
                <el-col :span="12">
                    <el-tooltip
                            v-for="media in medias"
                            :key="media.id"
                            placement="right"
                            :content="media.name"
                    >
                        <div @click="setMedia(media)">{{types[type]}}: {{media.name}}</div>
                    </el-tooltip>
                </el-col>
            </el-row>
            <el-button slot="reference">
                <div v-if="media">{{media.name}}</div>
                <div v-if="!media">选择{{ types[type] }}</div>
            </el-button>
        </el-popover>
         <el-button v-if="content && content !== '#'" @click="setMedia(null)">
            <div>移除</div>
         </el-button>
    </span>
</template>
<script>
    import { mapActions, mapGetters, mapMutations } from 'vuex'

    const types = { audio: '音频', video: '视频' }
    export default {
        name: 'media-selector',
        props: ['content', 'type'],
        data() {
            return { media: null, types, loaded: false }
        },
        mounted() {
        },
        watch: {
            content() {
                //this.getEvi()
            },
            deep: true
        },
        computed: {
            ...mapGetters(['mediaClasses', 'medias'])
        },
        methods: {
            ...mapActions(['getMediaClasses', 'getMedias']),
            ...mapMutations(['setMediaPage']),
            show() {
                if (this.loaded === false) {
                    this.getMediaClasses()
                    this.getMedias({ type: this.type })
                    this.loaded = true
                }
            },
            selectClass(node) {
                const { id, classParentId } = node
                const classIds = classParentId ? [classParentId, id] : [id]
                this.setMediaPage({
                    number: 1,
                    size: null,
                    filter: {
                        enabled: true,
                        classIds
                    }
                })
                this.getMedias({ type: this.type })
            },
            setMedia(media) {
                this.media = media
                if(!media) {
                    this.$emit('change', '#')
                    return
                }
                const content = '/api' + this.media.fileUrl
                this.$emit('change', content)
            }
        }
    }
</script>
<style lang="less">
    .res-selector {
        width: 400px;
        min-height: 400px;
        max-height: 50vh;
        overflow-y: hidden;

        .el-col {
            overflow-y: scroll;
            min-height: 400px;
            max-height: 50vh;
        }
    }
</style>


